<template>
	<view>
		<view class="fs50 color fw900 pl40" style="padding-top: 140rpx;">新用户注册</view>
		<view class="pl40 dflex alc mt10">
			<view class="gray">已有账号,立即</view>
			<view class="colora" @click="handerLogin">登录</view>
		</view>
		<!-- 登录输入框 -->
		<view style="margin-top: 110rpx;">
			<!-- 手机号 -->
			<view style="width: 670rpx;" class="auto">
				<u--input
					v-model="phone"
					placeholder="请输入手机号"
					border="bottom"
					fontSize="32rpx"
					:customStyle="{
						borderBottom: '1px solid #ff0',
						zIndex: 99
					}"
				></u--input>
			</view>
			<!-- 姓名 -->
			<view style="width: 670rpx;" class="auto mt60">
				<u--input
					v-model="name"
					placeholder="请输入姓名"
					border="bottom"
					fontSize="32rpx"
					:customStyle="{
						borderBottom: '1px solid #ff0',
						zIndex: 99
					}"
				></u--input>
			</view>
			<!-- 请输入验证码 -->
			<view style="width: 670rpx;margin-top: 60rpx;" class="auto dflex alc">
				<u--input
					v-model="code"
					placeholder="请输入验证码"
					border="bottom"
					fontSize="32rpx"
					:customStyle="{
						borderBottom: '1px solid #ff0',
						zIndex: 99
					}"
				></u--input>
				<view style="color: #4151DB;right: 50rpx" class="posia z-999" @click="getCode">
					{{ codemsg }}
				</view>
			</view>
			<!-- 密码 -->
			<view style="width: 670rpx;" class="auto mt60 dflex alc">
				<u--input
					v-model="password"
					placeholder="请设置密码"
					border="bottom"
					:type="eyesType"
					fontSize="32rpx"
					:customStyle="{
						borderBottom: '1px solid #ff0',
						zIndex: 99
					}"
				></u--input>
				<image
					@click="changeType"
					src="../static/eyes.png"
					class="posia eyes"
					v-if="eyesType == 'password'"
				></image>
				<image
					@click="changeType"
					src="../static/eyes2.png"
					class="posia eyes"
					v-if="eyesType == 'text'"
				></image>
			</view>
		</view>
		<view class="loginbtn textc auto">注册</view>
		<!-- 用户隐私协议 -->
		<view class="success dflex alc jcc fs28">
			<view @click="success = !success">
				<view v-if="!success"></view>
				<image v-if="success" src="../static/success.png" mode=""></image>
			</view>
			<view style="color: #999" class="ml10" @click="success = !success">同意</view>
			<view style="color: #4151DB">《用户协议》</view>
			<view style="color: #999">和</view>
			<view style="color: #4151DB">《隐私政策》</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			phone: '', //手机号
			name: '', //姓名
			code: '', //验证码
			password: '', //密码
			success: false,
			eyesType: 'password',
			codemsg: '获取验证码', //获取验证码显示的文字
			time: 0, //验证码倒计时中 不能进行点击
			num: 60 //倒计时秒数
		};
	},
	methods: {
		//验证码
		getCode() {
			this.time = this.time + 1;
			if ((this.num === 60 || this.num === 0) && this.time === 1) {
				console.log('获取验证码');
				let timer = setInterval(() => {
					this.codemsg = this.num-- + '秒后重新获取';
					if (this.num === 0) {
						this.codemsg = '再次获取';
						this.num = 60;
						this.time = 0;
						clearInterval(timer);
						return false;
					}
				}, 1000);
			}
		},
		//小眼睛切换
		changeType() {
			console.log(123);
			if (this.eyesType == 'password') {
				this.eyesType = 'text';
			} else if (this.eyesType == 'text') {
				this.eyesType = 'password';
			}
		},
		//跳转到登录
		handerLogin() {
			uni.navigateTo({
				url: '/pagesC/login/login'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.eyes {
	width: 40rpx;
	height: 40rpx;
	right: 50rpx;
	z-index: 999;
}
.psd {
	margin-left: 550rpx;
	margin-top: 20rpx;
}
.loginbtn {
	width: 670rpx;
	height: 100rpx;
	line-height: 100rpx;
	color: #fff;
	border-radius: 50rpx;
	background: linear-gradient(90deg, #8092eb 0%, #4151db 100%);
	margin-top: 140rpx;
}
.success {
	width: 750rpx;
	position: fixed;
	bottom: 92rpx;

	image {
		width: 30rpx;
		height: 30rpx;
	}
	& > view:nth-child(1) {
		& > view {
			width: 30rpx;
			height: 30rpx;
			border-radius: 50%;
			border: 2rpx solid #ccc;
		}
	}
}
</style>
